<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、列表渲染  数组更新检测  重塑方法</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 有时候对数组的处理用变异方法无法完全满足，这时就需要用重塑方法了,所有的重塑方法都不会影响原来数组的值 -->
	<div id="app">
		<p v-for="item in items">{{ item }}</p>
		<button @click="filter">测试filter</button>
		<button @click="concat">测试concat</button>
		<button @click="slice">测试slice</button>
		<button @click="set">设置数组元素</button>
		<button @click="changeLen">修改数组长度</button>
	</div>
	
	<!-- 注意事项：
	（1）不能用vm.items[indexOfItem] = newVal 的方式来直接设置一个项
	（2）不能用vm.items.length = newLength 的发送来修改数组长度
	 -->
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				items: [1,2,3,4,5],
				items2: [6,7,8,9,10]
			},
			methods: {
				// 对数组元素进行过滤，返回满足过滤条件的元素
				filter: function(){
					// 后两个参数可选，分别是数字索引和被过滤的数组
					var newItems = this.items.filter(function(item, index, arr){
						console.log(item, index, arr);
						return item > 2         // 过滤条件
					})

					console.log(newItems)        // 经过过滤后产生一个新数组
					console.log(this.items)      // 并不会影响原来数组的值
				},
				// 连接两个数组，产生一个新数组
				concat: function(){
					var newItems = this.items.concat(this.items2)
					console.log(this.items, this.items2)
					console.log(newItems)
				},
				// 返回数组中选定的元素
				slice: function(){
					var newItems = this.items.slice(2,4)    // 取索引2到4的元素，不包括4
					console.log(this.items)
					console.log(newItems)
				},
				// 为数组元素设置新值
				set: function(){
					// 第一种方式
					// Vue.set(example1.items, indexOfItem, newValue)
					Vue.set(this.items, 0, 10)
					console.log(this.items)

					// 第二种方式
					// example1.items.splice(indexOfItem, 1, newValue)
					this.items.splice(0, 1, 9)
					console.log(this.items)
				},
				// 修改数组长度
				changeLen: function(){
					this.items.splice(4)      // 这里把原来长度为5的数组长度设为4，相当于删除了最后一个元素
					console.log(this.items)      
				}				
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->